<template>
  <div py-49 text-center class="bg-#F8F9FA">
    <h1 text-35>技术支持</h1>
    <div class="text-#5F6368 mt-16 mb-48">多种方式获取插件使用帮助</div>
    <div flex justify-center gap-32>
      <div v-for="(i, idx) in list" :key="idx" class="item" w-250 py-20 px-32>
        <img :src="i.img" alt="" w-62 h-62 object-contain />
        <h2 pt-14 pb-18 text-20>{{ i.title }}</h2>
        <div v-if="i.desc && typeof(i.desc) === 'string'" >
            {{ i.desc }}
          </div>
          <div v-else>
            <div v-for="(k, idx3) in i.desc" :key="idx3" class="mb-8">
              {{ k.email }}
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import docs from '@/assets/image/docs.png'
import discussion from '@/assets/image/discussion.png'
import service from '@/assets/image/service.png'
import mail from '@/assets/image/mail.png'
import { useStore } from '@/stores/index'
const store = useStore()

const contactInfo = computed<any>(() => {
  return store.contactInfo
})

const list = computed(() => [
  {
    img: docs,
    title: '官方中心',
    desc: '详细的使用手册和API参考'
  },
  {
    img: discussion,
    title: '社区支持',
    desc: '开发者互助问答社区'
  },
  {
    img: service,
    title: '在线客服',
    desc: contactInfo.value?.workTime
  },
  {
    img: mail,
    title: '技术支持邮箱',
    desc: contactInfo.value?.emails
  }
])
</script>

<style scoped lang="scss">
.item {
  border-radius: 15.32px;
  background: #ffffff;
  box-shadow: 0px 5.11px 25.53px 0px rgba(0, 0, 0, 0.08);
}
</style>
